<template>
	<!-- GolfDate会员卡 -->
	<view class="wap">
		<!-- <view @click="handblack" class="blackbox">
			<image class="blackimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17107328943811032.png"></image>
			<view class="blacktext">会员中心</view>
			</view> -->
		<!-- <view class="beijingbox">
			
			
			<swiper class="member-swiper" previous-margin="40rpx" next-margin="40rpx" :current="currentIndex"
			@change="swiperChange">
			
				<swiper-item v-for="(item, index) in memberList" :key="index">
					
				</swiper-item>
			
			</swiper>
		</view> -->
		
		<view class="card_Body">
			<view class="member-card-wrap" v-for="(item, index) in memberList" :key="index">
				<view class="member-card" :style="'background-image:url('+item.backgroundimg+');background-repeat: no-repeat;background-size: cover'">
					<view class="content">
						<view :style="item.color" class="title">{{ item.name?item.name:'' }}
							<view class="userbox">
								<!-- <view class="head">
									<image :src="user.HeadImgUrl?user.HeadImgUrl:''" mode="aspectFill"></image>
								</view> -->
								<view class="infobox">
									<!-- <view v-if="user.Name" class="info_name" :style="item.color">
										{{user.Name?$util.entitiesToUtf16(user.Name):''}}
									</view> -->
									<!-- <view class="gradebox">
										<view class="level" :style="item.levelcolor">当前财富等级Lv.{{levelInfo.WealthLevel?levelInfo.WealthLevel:0}}</view>
										<image @click="levelFun" class="tishi" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17104053105741351.png" mode="widthFix"></image>
									</view> -->
									<!-- <view class="levelbox" :style="item.barbg" >
										<view class="levelbar" :style="{backgroundImage:item.bar,width:levelInfo.rote+'%'}"></view>
										<view class="level">Lv{{levelInfo.WealthLevel || 0}}</view>
										<view class="level">Lv{{levelInfo.WealthLevel+1 || 1}}</view>
										<view class="vip_icon">
											<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17104053105741351.png" mode=""></image>
										</view>
									</view> -->
								</view>
							</view>
			
						</view>
						<image class="card-icon" :src="item.vipimg" mode=""></image>
					</view>
					<view  class="content">
						<view :style="item.color" class="card-price" v-if="item.id==5">
							<view :style="item.endvip"   v-if="vipstyle == item.name">
								会员到期时间:{{end_vip?getTime2(end_vip):'--'}}
							</view>
							<view class="repeatedlybox" >
							<block v-if="is_frist_upgrade ">
								<view style="color: #BFB096;" class="card-num-line">￥{{ Issex == '女'?item.Fee:item.Fee }}/年</view>
								<view style="display: flex;align-items: center;">
								<view :style="item.color+';font-size: 32rpx;font-weight: 600;'" class="card-price-unit">
									￥
								</view>
								<view :style="item.color" class="card-num">{{ Issex == '女'?Math.round(item.Fee*0.7):Math.round(item.Fee*0.7) }}/年
									<view class="frist-tips" v-if="is_frist_upgrade">首充7折</view>
								</view>
								</view>
							</block>
							<block v-else>
								<view style="color: #BFB096;" class="card-num-line" v-if="item.Discount <1">￥{{ Issex == '女'?item.Fee:item.Fee }}/年</view>
								<view :style="item.color" class="card-price-unit">
									￥
								</view>
								<view :style="item.color" class="card-num">{{item.Discount == 1?item.Fee:item.PValue}}</view>
								<view class="frist-tips" v-if="item.Discount <1">{{'限时'+(item.Discount * 10)+'折'}}</view>
								<view :style="item.color" class="card-price-unitime">
									元/年
								</view>
							</block>
							</view>
						</view>
						<view :style="item.color" class="card-price" v-else>
							<view :style="item.endvip" v-if="vipstyle == item.name">
								会员到期时间:{{end_vip?getTime2(end_vip):'--'}}
							</view>
							<view class="repeatedlybox" >
							<block v-if="is_frist_upgrade ">
								<view style="color:#9B7D60;" class="card-num-line">￥{{ Issex == '女'?item.Fee:item.Fee }}/月</view>
								<view style="display: flex;align-items: center;">
								<view :style="item.color+';font-size: 32rpx;font-weight: 600;'" class="card-price-unit">
									￥
								</view>
								<view :style="item.color" class="card-num">{{ Issex == '女'?Math.round(item.Fee*0.7):Math.round(item.Fee*0.7) }}/月
									<!-- <view class="frist-tips" v-if="item.Discount <1">{{'限时'+(item.Discount * 10)+'折'}}</view> -->
								</view>
								</view>
							</block>
							<block v-else>
								<view style="color:#9B7D60;" class="card-num-line" v-if="item.Discount <1">￥{{item.Fee}}/月</view>
								<view :style="item.color" class="card-price-unit">
									￥
								</view>
								<view :style="item.color" class="card-num">{{item.Discount == 1?item.Fee:item.PValue}}</view>
								<view class="frist-tips" v-if="item.Discount <1">{{'限时'+(item.Discount * 10)+'折'}}</view>
								<view :style="item.color" class="card-price-unitime">
									元/年
								</view>
							</block>
							</view>
						</view>
						<block v-if="user.UserType=='普通用户' ||user.UserType=='体验会员'">
							<view @click="sub(item.name,item)" class="card-btn">开通{{item.lit}}</view>
						</block>
						<block v-else>
							<view @click="sub(item.name,item)" class="card-btn">{{item.lit}}续费</view>
						</block>
					</view>
				</view>
				
				<view class="member-privilege-list" style="padding-left: 0;">
					<view class="privilege-content" v-if="item.Description">
						<!-- <view  class="icon-bg">
							<image class="icon" style="border-radius: 0;" :src="'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17116923928151009.png'" mode="widthFix"></image>
						</view> -->
						<view class="title-wrap" style="margin-left: 14rpx;">
							<view class="title">{{item.id==2010?'金卡' : item.id==3010?'黑卡':''}}权益</view>
							<view class="desc">{{item.Description}}</view>
						</view>
					</view>
					
					
				</view>
			</view>
		</view>
		
		

		<!-- <text class="camtitle" @click="Camibtn">卡密兑换</text> -->
		<!-- <block>
			<view class="member-privilege">
				<view class="title">
					<text>会员特权</text>
					
				</view>
			</view>
			
			<view class="member-privilege-list">
				<view v-if="memberList[currentIndex].initial!=''" class="hasprev-privilege">
					<view :class="`sm-card-medal-` + (memberList[currentIndex].ID || '0')">
						<image class="sm-card-heiicon" v-if=" currentIndex == 1" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1713408941874574.png"></image>
						<image v-else class="sm-card-icon" :src="memberList[currentIndex-1].ICON" mode=""></image>
			
					</view>
			
					<view class="title-wrap">
						包含{{ memberList[currentIndex].initial == '金卡会员'?'月卡会员': memberList[currentIndex].initial}}所有特权
					</view>
				</view>
				<view class="privilege-content" v-for="(item, index) in memberList[currentIndex].privileges" :key="index">
					<view  class="icon-bg">
						<image class="icon" :src="item.icon"></image>
					</view>
					<view class="title-wrap">
						<view class="title">{{ item.content }}</view>
						<view class="desc">{{ item.desc }}</view>
					</view>
				</view>
			</view>
		</block> -->
		
		
		<!-- 卡密弹窗 -->
		<view class="Camibox" v-if="isredeem">
			<view class="vipbox">
				<view class="title">卡密兑换</view>
				<input v-model="camnum" placeholder="请输入兑换码" placeholder-class="placename">
				<view class="btnbox">
					<!-- <view class="cancel" @click="closecoupon">取消</view> -->
					<view class="ack" @click="ChangeCard">立即兑换</view>
				</view>
				<image @click="closecoupon" class="closeimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1713510874153766.png"></image>
			</view>
		</view>

		<uni-popup ref="board" type="center">
			<scroll-view class="scroll" scroll-y>
				<view class="boardbox">
					<view class="titbox">
						<view class="title">
							财富等级说明
						</view>
						<view class="lit">
							财富等级是指用户在雪遇平台里所有消费的总额，下面是等级对应表
						</view>
					</view>
					<view class="box">
						<view class="box_item">
							等级
						</view>
						<view class="box_num">
							起始(元)
						</view>
						<view class="box_num">
							截止(元)
						</view>
					</view>
					<block v-if="boardInfo.length">
						<view class="box" v-for="item in boardInfo" :key="item.id">
							<view class="box_item">
								Lv{{item.WealthLevel}}
							</view>
							<view class="box_num">
								{{item.Start_Consume}}
							</view>
							<view class="box_num">
								{{item.End_Consume}}
							</view>
						</view>						
					</block>
				</view>		
				<view class="board_btn">
					<view class="btn_" @click="levelClose">
						关闭
					</view>
				</view>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script>
	import addUserIcon from './superMember/icon_jhy.svg' // 加好友
	import addWeChatIcon from './superMember/icon_wx.svg' // 加微信
	import userFilterIcon from './superMember/icon_shaixuan.svg' // 用户筛选
	import serviceIcon from './superMember/icon_srkf.svg' // 私人客服
	import medalIcon from './superMember/icon_hyxz.svg' // 专属勋章
	import whoLookIcon from './superMember/icon_ck.svg' // 谁看过我
	import roomIcon from './superMember/icon_xxzj.svg' // 线下组局
	import faceIcon from './superMember/icon_ml.svg' // 蒙脸
	import hiddenIcon from './superMember/icon_ys.svg' // 隐身
	import serviceKFIcon from './superMember/icon_kf.svg' // 客服代组局

	export default {
		data() {
			return {
				camnum:'',
				isredeem:false,
				currObj: {},
				Issex:'',
				end_vip:null,
				memberList: [{
						levelcolor:'color: #3D2003',
						vipimg:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17116923928151009.png',
						id: 2010,
						name: '金卡会员',
						lit:'金卡',
						bar:'linear-gradient(to right,#945f2f,#ca9458)',
						barbg:'background-color: #E1BB7B;',
						price: '198',
						nv_price:'99',
						initial: '',
						background: 'background: linear-gradient(90deg, #FBE9C0 0%, #E8BC76 100%);',
						backgroundimg:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17124826700691167.png',
						color: 'color: #3D2003',
						iconBg: 'background: rgb(195,153,79)',
						endvip:'font-size: 28rpx;color: #3D2003;margin-bottom: 10rpx;',
						privileges: [{
								icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17110944128761265.png',
								content: '加好友',
								desc: '每天可加10个好友'
							},
							{
								icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17110944934061491.png',
								content: '加微信',
								desc: '每天可加10个微信'
							},
							{
								icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17110945242741198.png',
								content: '上推荐频道',
								desc: '每月3次机会，每次24小时，让更多人看到你'
							},
							// {
							// 	icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17110945441801051.png',
							// 	content: '“Superlike”',
							// 	desc: '每天5个“Superlike”,对方会收到你喜欢Ta的通知'
							// },
							{
								icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711094557767271.png',
								content: '谁看过我',
								desc: '看看谁看了你'
							},
							{
								icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/171109457175142.png',
								content: '专属勋章',
								desc: '平台展示专属身份勋章'
							}
						]
					},
					{
						levelcolor:'color: #FCF0DA',
						id: 3010,
						vipimg:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17116923481061090.png',
						name: '黑卡会员',
						lit:'黑卡',
						bar:'linear-gradient(to right, #443d35, #867969);',
						barbg:'background-color: #b9af9f;',
						price: '1980',
						nv_price:'990',
						initial: '金卡会员',
						background: 'background: linear-gradient(135deg, #6C645E 0%, #1E2129 100%);',
						backgroundimg:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17124819559641290.png',
						color: 'color:#FCF0DA',
						iconBg: 'background: rgb(97,97,97)',
						endvip:'color: #FCF0DA;font-size: 28rpx;',
						privileges: [	
							// {
							// 	icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17110169839081313.png',
							// 	content: '线下活动',
							// 	desc: '免费参与官方线下活动或比赛，每月一次，过期不累计'
							// },
							// {
							// 	icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17110170373121273.png',
							// 	content: '蒙脸',
							// 	desc: '不显示头像和封面'
							// },
							// {
							// 	icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17110170721971306.png',
							// 	content: '隐身',
							// 	desc: '不在会员页面出现'
							// },
							// {
							// 	icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17110170974281393.png',
							// 	content: '一键开聊',
							// 	desc: '无需等对方通过好友，直接和理想型对话'
							// }
						]
					},
					// {
					// 	levelcolor:'color: #FCF0DA',
					// 	id: 5,
					// 	vipimg:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711692318004562.png',
					// 	name: '黑金年卡会员',
					// 	bar:'linear-gradient(to right, #6f543c, #b39473);',
					// 	barbg:'background-color:#6b593e;',
					// 	price: '12000',
					// 	initial: '黑金卡会员',
					// 	background: 'background: linear-gradient(135deg, #73685B 0%, #2A2722 100%);',
					// 	color: 'color:white',
					// 	iconBg: 'background: rgb(193,120,84)',
					// 	endvip:'color: #FCF0DA;font-size: 28rpx;',
					// 	privileges: [
					// 		{
					// 			hievip:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711702781807287.png',
					// 			icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711017311265530.png',
					// 			content: '私人定制球局',
					// 			desc: '邀请心仪用户参与你的球局'
					// 		}
					// 	]
					// }
				],
				currentIndex: 0,
				is_frist_upgrade: false,
				userInfo:uni.getStorageSync('user'),
				levelInfo:{},
				boardInfo:[],
				vipstyle:null,
				user:{},
			}
		},

		onLoad(e) {
			
			if (e.t == 1) {
				this.currentIndex = 0;
			} else if (e.t == 2) {
				this.currentIndex = 1;
			} else if (e.t == 3) {
				this.currentIndex = 2;
			}
			this.Issex = uni.getStorageSync('user').Sex
			this.end_vip = uni.getStorageSync('user').End_Date
			this.getvipstyle()
			console.log(this.Issex);
			console.log(this.end_vip);
			this.init();

		},
		methods: {
			getvipstyle(){
				if(uni.getStorageSync('user').UserType == '金卡会员'){
					this.vipstyle = '金卡会员'
				}else if(uni.getStorageSync('user').UserType == '黑金年卡会员'){
					this.vipstyle = '黑卡会员'
				}
			},
			//卡密兑换
			async ChangeCard(){
				let res = await this.$api.post('Coupon/ChangeCard',{
					Code:this.camnum,
					CompanyID:'',
				})
				if(res.data){
					this.isredeem = false
				}
			},
			Camibtn(){
				this.isredeem = true
			},
			closecoupon(){
				this.isredeem = false
			},


			getTime2(l) {
						let d = new Date(l);
						let timestamp = d.getTime();
						return this.$u.date(timestamp, 'yyyy-mm-dd');
				},
			async sub(name,item) {
				console.log('==========='+name);
				if (!name) {
					this.$pv.msg('请选择会员');
					return false;
				}
				let new_fee = item.Fee
				// if(this.currObj.UserType == '黑金年卡会员'){
				// 	if(this.Issex == '女'){
				// 		new_fee = this.currObj.Fee * 0.5;
				// 	}else{
				// 		new_fee = this.currObj.Fee
				// 	}
				// }
				if(name == '月卡会员'){
						new_fee = this.memberList[0].Discount ==1?this.memberList[0].Fee:this.memberList[0].PValue	
				}
				if(name == '年卡会员'){
					new_fee = this.memberList[1].Discount ==1?this.memberList[1].Fee:this.memberList[1].PValue
					
					
				}
				new_fee = item.Discount ==1?item.Fee:item.PValue	

				let pres = await this.$api.post('/Payment/Pay', {
					CompanyID: 6002,
					total_fee: new_fee,
					EventType: '会员升级',
					body: item.UserType,
					SourcePage:'apply_member',
					// #ifdef MP-WEIXIN
					PayChannel: "weixin",
					// #endif
					// #ifdef APP
					PayChannel: "app"
					// #endif
				});

				let _this = this;
				let payObj = JSON.parse(pres.data);
				
				uni.requestPayment({
					provider: 'wxpay',
					// #ifdef APP
					orderInfo: payObj,
					// #endif
					// #ifdef MP-WEIXIN
					timeStamp: payObj.timeStamp,
					nonceStr: payObj.nonceStr,
					package: payObj.package,
					signType: payObj.signType,
					paySign: payObj.paySign,
					// #endif
					success: async function(res) {
						_this.$pv.msg('支付成功');
						setTimeout(() => {
							_this.upDateInfo();
						}, 500);

						_this.nav_back(2000);
					},
					fail: function(err) {
						console.log(err);
						_this.$pv.msg('您已取消支付');
					}
				});
			},
			async init() {
				let u = await this.$api.post('User/GetUserInfo', {
					ID: uni.getStorageSync('user').ID
				});
				
				this.user = u.data;
				if(this.user.UserType=='金卡会员'){
					this.currentIndex=0;
				}
				else if(this.user.UserType=='黑金卡会员'){
					this.currentIndex=1;
				}else if(this.user.UserType=='黑金年卡会员'){
					this.currentIndex=2;
				}

				await this.$api.post('/Common/Add_ViewPath', {
					Path: 'apply_member',
					Platform: uni.getStorageSync('platform')
				});

				let res = await this.$api.post('Member/GetUserType', {
					CompanyID: 6003
				});
				if(res.data){
					res.data.map((item) => {
						this.memberList.map((list, index) => {
							if (item.ID == list.id) {
								this.memberList[index] = {
									...list,
									...item
								}
							}
						})
					})
					this.memberList = [...this.memberList]
				}
				console.log('=======');
				console.log(this.memberList);
				this.currObj = this.memberList[this.currentIndex];
				console.log(this.currObj,'1111');
				let mf_data = await this.$api.post('/Member/IsFirstUpgrade');
				// this.is_frist_upgrade = mf_data.data;
				
				//财富等级
				let level = await this.$api.post('Member/GetWealthInfo',{UserID:uni.getStorageSync('user').UserID})
				let con = level.data
				this.levelInfo = level.data
				this.levelInfo.rote = parseFloat((con.Current_Consume-con.Start_Consume)/(con.End_Consume-con.Start_Consume)).toFixed(2)*100
				
				let board = await this.$api.post('Member/WealthDescription')
				this.boardInfo = board.data
			},
			async upDateInfo() {
				let res = await this.$api.post('User/GetUserInfo', {
					ID: uni.getStorageSync('user').UserID
				});
				let user = res.data;
				user.UserID = res.data.ID;
				uni.setStorageSync('user', user);
				this.$store.commit('setUser', user);

			},
			swiperChange(e) {
				this.currentIndex = e.detail.current;
				this.currObj = this.memberList[this.currentIndex];


			},
			levelFun(){
				this.$refs.board.open()
			},
			levelClose(){
				this.$refs.board.close()
			}
		}
	};
</script>

<style lang="scss">
page{
	background: linear-gradient(180deg, #57514F 0%, #191C20 100%);
	width: 100%;
	height: 100%;
}
.placename{
	font-size: 32rpx;
	color: #999999;
	line-height: 88rpx;
}
.Camibox{
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.6);
	position: absolute;
	top: 0;
	left: 0;
	.vipbox{
		position: relative;
		width: 640rpx;
		height: 426rpx;
		background-image: url('https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1713510378171190.png');
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		text-align: center;
		// background-color: #fff;
		.btnbox{
			display: flex;
			justify-content: center;
			.cancel{
				width: 100rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 20rpx;
				background-color: #f6f6f6;
				font-size: 24rpx;
				color: #333333;
				margin-right: 106rpx;
			}
			.ack{
				width: 392rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 44rpx;
				background-color: #0d0d0d;
				font-size: 32rpx;
				color: #fff;
			}
		}
		input{
			width: 560rpx;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 28rpx;
			background-color: #F6F6F6;
			margin: 0 auto;
			margin-bottom: 48rpx;
			color: #999999;
			font-size: 32rpx;
			text-align: center;
		}
		.title{
			font-size: 36rpx;
			color: #0D0D0D;
			font-weight: 600;
			margin-top: 56rpx;
			margin-bottom: 48rpx;
		}
		.closeimg{
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			top: 32rpx;
			right:32rpx;
		}
	}
}
	.wap {
		height: 100%;
		overflow-y: scroll;
		padding: 0 !important;
		position: relative;
		// background: linear-gradient(180deg, #57514F 0%, #191C20 100%);
		.blackbox{
			position: fixed;
			left: 30rpx;
			top: 63rpx;
			z-index: 2000;
			display: flex;
			.blackimg{
				width: 52rpx;
				height: 52rpx;
			}
			.blacktext{
				font-size: 36rpx;
				font-weight: 600;
				color: #fff;
				margin-left: 216rpx;
			}
		}
		.member-swiper {
			padding-top: 50rpx;
			height: 380rpx;
		}
		.beijingbox{
			width: 750rpx;
			height: 382rpx;
			background-image: url('https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/171159583482530.png');
			background-size: cover;
			background-repeat: no-repeat;
		}
		.member-card-wrap {
			padding: 0 12rpx;
			
			
			margin-bottom: 52rpx;
			&:last-child{
				margin-bottom: 0;
			}
		}

		.member-card {
			background-color: white;
			color: black !important;
			padding: 34rpx;
			border-radius: 42rpx;
			height: 320rpx;
			.content {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;
				position: relative;
				.title{
					width: 70%;
					font-size: 42rpx;
					font-weight: 500;
				}
				.userbox{
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					height: 80rpx;
					.head{
						image{
							border-radius: 50%;
							width: 80rpx;
							height: 80rpx;
						}
					}
					.infobox{	
						width: 100%;
						margin: -12rpx 0 0rpx 10rpx;
						.info_name{
							font-size: 32rpx;
							color: #3D2003;
							font-weight: 500;
							margin-bottom: 10rpx;
						}
						.gradebox{
							display: flex;
							align-items: center;
							margin-bottom: 12rpx;
							.level{
								font-size: 24rpx;
								font-weight: 400;
								color: #3D2003;
								margin-right: 8rpx;
							}
							.tishi{
								width: 28rpx;
								height: 28rpx;
							}
						}
						.levelbox{
							position: relative;
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 0 20rpx;
							box-sizing: border-box;
							width: 85%;
							height: 10rpx;
							border-radius: 50rpx;
							background-color: #dfc79b;
							background-color: #e0c295;
							view{font-size: 24rpx;color: #fff;font-weight: normal;z-index: 9;}
							.levelbar{
								position: absolute;
								width: 70%;
								height: 100%;
								border-radius: 50rpx;
								// background-image: linear-gradient(to right,#945f2f,#ca9458);
								background-color: #502E0D;
								top: 0;
								left: 0;
							}
							.vip_icon{
								position: absolute;
								right: -56rpx;
								top: 50%;
								transform: translate(-50%,-50%);
								width: 30rpx;
								height: 30rpx;
								image{width: 100%;height: 100%;}
							}
						}
					}
				}
				.title {
					color: black;
					font-weight: bold;

					font-size: 40rpx;
				}

				.frist-tips {
					// margin-top: 10rpx;
					background-color: #ef4034;
					font-size: 22rpx;
					color: #fff;
					line-height: 36rpx;
					width: 102rpx;
					height: 36rpx;
					padding: 6rpx 0;
					border-radius: 30rpx 36rpx 36rpx 0;
					text-align: center;
					position: absolute;
					top: -3rpx;
					right: -46rpx;
				}

				.card-btn {
					border-radius: 36rpx;
					background-image: linear-gradient(to bottom,#FCDFAB,#F0D46D);
					padding: 16rpx 22rpx;
					color: #1F1F1F;
					font-size: 28rpx;
					margin-top: 12rpx;
					font-weight: 600;
				}

				.card-price {
					// display: flex;
					align-items: center;
					color: black;
					position: relative;
					.repeatedlybox{
						width: 350rpx;
						display: flex;
    					align-items: center;
						position: relative;
					}
				}
				.card-num,
				.card-price-unit {
					// font-weight: bold;
					font-size: 28rpx;
				}

				.card-num {
					// margin: 0 8rpx;
					margin-right: 8rpx;
					font-size: 40rpx;
					position: relative;
					font-weight: 600;
				}

				.card-num-line {
					font-size: 28rpx;
					// margin: 0 8rpx;
					// color: #9B7D60 !important;
					text-decoration: #000 line-through;
				}
			}

			.content:nth-last-child(1) {
				margin-bottom: 0;
			}

			.card-icon {
				width: 132rpx;
				height: 132rpx;
				margin-right: 8rpx;
			}



		}

		.card-medal-0 {
			width: 132rpx;
			height: 132rpx;
			background: linear-gradient(135deg, #5817d8 0%, #1D1D1D 100%);
			border: 10rpx solid;
			border-radius: 50%;
		}

		.card-medal-1 {
			width: 132rpx;
			height: 132rpx;
			background: linear-gradient(135deg, #D8D8D8 0%, #1D1D1D 100%);
			border: 10rpx solid;
			border-radius: 50%;
		}

		.card-medal-2 {
			width: 132rpx;
			height: 132rpx;
			background: linear-gradient(135deg, #FEEDDF 0%, #CCAC99 100%);
			border: 10rpx solid;
			border-radius: 50%;
		}

		.card-medal-5 {
			width: 132rpx;
			height: 132rpx;
			background: linear-gradient(135deg, #D8D8D8 0%, #1D1D1D 100%);
			border: 10rpx solid;
			border-radius: 50%;
		}

		.sm-card-medal-1 {
			width: 80rpx;
			height: 80rpx;
			background: linear-gradient(135deg, #D8D8D8 0%, #1D1D1D 100%);
			border: 10rpx solid;
			border-radius: 50%;
		}

		.sm-card-medal-2 {
			width: 80rpx;
			height: 80rpx;
			background: linear-gradient(135deg, #E3C791 0%, #D09E4C 100%);
			border: 10rpx solid;
			border-radius: 50%;
			text-align: center;
			line-height: 70rpx;
		}

		.sm-card-medal-5 {
			width: 80rpx;
			height: 80rpx;
			// background: linear-gradient(135deg, #D8D8D8 0%, #1D1D1D 100%);
			// border: 10rpx solid;
			border-radius: 50%;
			text-align: center;
			line-height: 70rpx;
		}

		.member-privilege,
		.member-privilege-list,
		.member-pass {
			padding: 0 45rpx;
		}

		.member-privilege {
			margin-top: 42rpx;
			.title {
				font-size: 36rpx;
				color: #fff;
				display: flex;
				align-items: baseline;
				justify-content: space-between;
				text{
					font-size: 36rpx;
					color: #fff;
				}
				.camtitle{
				 font-size: 26rpx;
				 text-decoration: underline;
 				font-style: italic;
				/* 斜体 */
			}
			}
		}

		.member-privilege-list {
			margin-top: 20rpx;

			.hasprev-privilege {
				display: flex;
				align-items: center;
				margin-bottom: 44rpx;

				.title-wrap {
					font-size: 32rpx;
					color: white;
				}
			}

			.desc {
				font-size: 24rpx;
				margin-top: 6rpx;
			}

			.title-wrap {
				margin-left: 22rpx;

				.title
				 {
					color: white;
					font-size: 32rpx;
					font-weight: 600;
				}
				.desc{
					color: #999999;
					font-size: 24rpx;
				}
			}

			.privilege-content {
				display: flex;
				align-items: center;
				margin-top: 26rpx;

				.icon-bg {
					border-radius: 50%;
					height: 92rpx;
					width: 92rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					.icon {
					border-radius: 50%;
					height: 92rpx;
					width: 92rpx;
					}
				}

				
			}

			.sm-card-icon {
				width: 60rpx;
				height: 60rpx;
				vertical-align: middle;
			}
			.sm-card-heiicon{
				width: 80rpx;
				height: 80rpx;
				vertical-align: middle;
			}
		}

		.member-pass {
			position: absolute;
			bottom: 55rpx;
			width: 80%;
		}

	}


	.btn {
		margin-top: 60rpx;
		background: linear-gradient(180deg, #FDF9F6 0%, #E1C4A6 100%);
		color: #1F1F1F;
	}
	.scroll{
		width: 80vw;
		height: 70vh;
		background-color: #fff;
		border-radius: 24rpx;
		padding: 30rpx 54rpx;
		box-sizing: border-box;
		.board_btn{
			position: sticky;
			bottom: 0rpx;
			background-color: #fff;
			padding-top: 20rpx;
			.btn_{
				width: 140rpx;
				height: 60rpx;
				font-size: 26rpx;
				background-color: #ef4034;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 16rpx;
				color: #fff;
				margin: 0 auto;
			}
		}
	}
	.boardbox{
		.titbox{
			padding-bottom: 20rpx;
			position: sticky;
			top: 0rpx;
			view{color: #000;}
			background-color: #fff;
			.title{
				text-align: center;
			}
			.lit{
				margin-top: 10rpx;
				font-size: 26rpx;
			}
		}
		
		.box{
			display: flex;
			align-items: center;
			
			view{
				border: 2rpx solid #1d1f21;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 10rpx 0;
				color: #1d1f21;
				font-size: 24rpx;
			}
			.box_item{
				width: 30%;
			}
			.box_num{
				width: 40%;
			}
		}
	}
	
	
.card_Body{
	padding: 24rpx;
}
</style>